<template>
  <view class="container">
    <view class="content">
      <view class="header_txt">
        <view class="back"
              @click="backHandler">
          <image src="/static/img/back3.png"></image>
        </view>
        <view class="title"> 模考刷题 </view>
      </view>
      <view class="box flexs11">
        <scroll-view :scroll-y="true"
                     class="scroll-Y left">
          <view :class="type==index?'left_list flexs1':'left_list_new flexs1'"
                v-for="(item,index) in subjectClassList"
                :key="index"
                @click="choose(index)">
            <view :class="type==index?'line':''"
                  class="li"></view>
            <view class="title">{{item.name}}</view>
          </view>
        </scroll-view>
        <scroll-view :scroll-y="true"
                     class="scroll-Y right">
          <view class="right_box">
            <view class="right_list"
                  v-show="secondList.length!=0">
              <navigator class="right_item"
                         v-for="(item,index) in secondList"
                         :key="index"
                         :url="`/pages/brushthetopic/brush_type?classid=${item.id}`">
                {{item.name}}
              </navigator>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      scrollTop: 1,
      type: 0,
      queryParams: { type_id: undefined },
      subjectClassList: [],
      secondList: []
    }
  },
  onLoad() {
    this.getSubjectClassList()
  },
  methods: {
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    },
    //subject_class/index
    async getSubjectClassList() {
      const { data } = await this.$http.post('/subject_class/index', { ...this.queryParams, token: uni.getStorageSync('userinfo').token })
      console.log(data)
      this.subjectClassList = data.data
      this.secondList = this.subjectClassList[0].second_list
    },
    choose(type) {
      // console.log(type)
      this.type = type
      // console.log(this.type)

      this.secondList = this.subjectClassList[type].second_list
      // console.log(this.secondList)
    }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // }

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.box {
  width: 100%;
  height: 100%;
  border-top: 1rpx solid #e5e5e5;
  display: flex;
}

.left {
  width: 210rpx;
  height: 100vh;
}

.left_list {
  position: relative;
  width: 210rpx;
  height: 110rpx;
  line-height: 110rpx;
  background-color: #ffffff;
}

.left_list_new {
  position: relative;
  width: 210rpx;
  height: 110rpx;
  line-height: 110rpx;
  background-color: #f2f2f2;
}
.line {
  position: absolute;
  top: 50rpx;
  left: 0;
  width: 4rpx;
  height: 20rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  align-items: center;
}

.title {
  width: 170rpx;
  text-align: center;
  color: #333333;
  font-size: 24rpx;
}

.right {
  width: 600rpx;
  height: 100vh;
}

.right_box {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-top: solid 1rpx #ffffff;
  flex-wrap: wrap;

  padding: 0 20rpx;
}
.right_list {
  margin-top: 0rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 40rpx;
}
.right_item {
  padding: 15rpx 22rpx;
  border: 1rpx solid #cccccc;
  border-radius: 10rpx;
  margin: 15rpx 10rpx;
}
</style>
